<template>
  <mescroll-body
    :sticky="true"
    :bottombar="false"
    ref="mescrollRef"
    @init="mescrollInit"
    @down="downCallback"
    @up="upCallback"
  >
    <view style="background-color: #F5F5F5;">
      <u-form
        :model="form"
        ref="uForm"
        label-width="200"
        :label-style="{paddingLeft: '20rpx'}"
      >
        <u-form-item label="记住位置">
          <u-switch v-model="form.isRemember"></u-switch>
        </u-form-item>

        <u-form-item
          label="动画缓动时长"
          label-position="top"
        >
          <view style="padding: 20rpx 40rpx; width: 100%;">
            <u-slider
              style=""
              v-model="form.transitionTime"
              step="10"
            ></u-slider>
            <view style="padding: 20rpx 0 0;">时长:{{form.transitionTime * 10}}</view>
          </view>
        </u-form-item>

      </u-form>

    </view>

    <view style="position: sticky; z-index: 999; top: var(--window-top); width: 100%;">
      <u-tabs-swiper
        ref="uTabs"
        :list="list"
        :current="current"
        @change="tabsChange"
        :is-scroll="false"
        swiperWidth="750"
      ></u-tabs-swiper>
    </view>
    <swiper
      :style="{height: 200 * listData.length + 'rpx'}"
      :current="swiperCurrent"
      @transition="transition"
      @animationfinish="animationfinish"
    >
      <swiper-item
        class="swiper-item"
        v-for="(item, index) in list"
        :key="index"
      >
        <view
          class="list"
          v-for="item in listData"
          :key="item.id"
        >
          <list-item :listData="item"></list-item>
        </view>
      </swiper-item>
    </swiper>
  </mescroll-body>
</template>

<script>
import listItem from "@/components/list-item";
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
  components: { listItem },
  mixins: [MescrollMixin],
  data() {
    return {
      list: [
        {
          name: "校园春色",
          listData: [],
          num: 1,
          y: 0,
          curPageLen: 0,
          totalSize: 0,
        },
        {
          name: "武侠古典",
          listData: [],
          num: 1,
          y: 0,
          curPageLen: 0,
          totalSize: 0,
        },
        {
          name: "都市言情",
          listData: [],
          num: 1,
          y: 0,
          curPageLen: 0,
          totalSize: 0,
        },
      ],
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
      listHeight: 0,
      form: {
        isRemember: false,
        transitionTime: 0,
      },
    };
  },
  methods: {
    // tabs通知swiper切换
    tabsChange(index) {
      this.scrollBack(index, 1);
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      this.scrollBack(e.detail.current, 2);
    },
    // 状态记忆与恢复方法
    scrollBack(index, type) {
      let preTab = this.list[this.swiperCurrent];
      preTab.y = this.mescroll.getScrollTop();
      switch (type) {
        case 1:
          this.swiperCurrent = index;
          break;

        case 2:
          this.$refs.uTabs.setFinishCurrent(index);
          this.swiperCurrent = index;
          this.current = index;
          break;
      }
      let curTab = this.list[index];
      if (!curTab.listData.length) {
        // 没有初始化,则初始化
        this.mescroll.resetUpScroll();
      } else {
        // 初始化过,则恢复之前的列表数据
        this.mescroll.setPageNum(curTab.num + 1); // 恢复当前页码
        this.mescroll.endBySize(curTab.curPageLen, curTab.totalSize);
        if (this.form.isRemember) {
          this.$nextTick(() => {
            this.mescroll.scrollTo(curTab.y, this.form.transitionTime * 10); // 恢复滚动条的位置
          });
        }
      }
    },
    async getListData(page) {
      let res = await uni.request({
        url: "https://api.t.rushimei.cn/app/getProjectList",
        method: "POST",
        data: { page },
      });
      console.log(res[1]);
      let curTab = this.list[this.swiperCurrent];
      if (page == 1) curTab.listData = [];
      curTab.listData = [...curTab.listData, ...res[1].data.data.data];
      curTab.num = page;
      curTab.curPageLen = res[1].data.data.data.length;
      curTab.totalSize = res[1].data.data.total;
      // 需先隐藏加载状态
      this.mescroll.endBySize(curTab.curPageLen, curTab.totalSize);
    },
    downCallback() {
      this.mescroll.resetUpScroll();
    },
    upCallback(page) {
      this.getListData(page.num);
    },
  },
  computed: {
    // 列表数据
    listData() {
      return this.list[this.swiperCurrent].listData;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>